<template>
  <Popup
    v-model:show="showPopup"
    :style="{
      background: 'transparent',
      overflow: 'hidden',
      height: '100vh',
      'max-width': '100vw',
    }"
  >
    <div v-if="!isAffirm" class="gender-select">
      <div class="gender-header-title">
        <span class="title">欢迎来到小妙宇宙</span>
        <span
          >您好！欢迎来到小妙宇宙<br />
          请选择您的宠物来伴随您一起学习吧</span
        >
      </div>
      <div
        :class="{ 'gender-man-box': !gender, 'gender-man-box-active': gender }"
        @click="gender = true"
      >
        <img src="@/assets/image/panda.png" class="gender-icon" />
        <img
          v-if="gender"
          src="@/assets/image/gender-hi.png"
          class="gender-hi"
        />
        <div v-if="gender" class="gender-text">要选择我吗？</div>
        <img src="@/assets/image/man.png" class="gender-man" />
      </div>
      <div
        :class="{
          'gender-girl-box': gender,
          'gender-girl-box-active': !gender,
        }"
        @click="gender = false"
      >
        <img src="@/assets/image/panda.png" class="gender-icon" />
        <img
          v-if="!gender"
          src="@/assets/image/gender-hi.png"
          class="gender-hi"
        />
        <div class="gender-text">要选择我吗？</div>
        <img src="@/assets/image/girl.png" class="gender-girl" />
      </div>
      <img
        src="@/assets/image/next.png"
        class="gender-next"
        @click="nextClick"
      />
    </div>
    <div v-else class="gender-affirm">
      <div @click="reelect">
        <img src="@/assets/image/back.png" class="reelect" />
        <div class="reelect-txt">重选</div>
      </div>
      <div class="gender-header-title">
        <span class="title">确认选择</span>
        <span
          >以后就由小兔子来陪伴你共同成长啦！<br />请好好爱护他，给予他能量</span
        >
      </div>
      <img src="@/assets/image/panda.png" class="affirm-panda" />
      <img src="@/assets/image/platform.png" class="platform" />
      <div class="affirm-button">已决定就是你了</div>
    </div>
  </Popup>
</template>
<script lang="ts" setup>
import { Popup } from "vant";
import { ref } from "vue";
const showPopup = defineModel<boolean>("showPopup");
const gender = ref(true);
const isAffirm = ref(false);
function nextClick() {
  isAffirm.value = true;
}
function reelect(){
  isAffirm.value = false;
}
</script>
<style lang="scss" scoped>
.gender-select {
  .gender-header-title {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: 350;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0px;
    color: #ffffff;
    margin-top: 63px;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-direction: column;
    .title {
      font-family: Source Han Sans;
      font-size: 28px;
      font-weight: bold;
      line-height: 42px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
    }
  }
  .gender-man-box {
    width: 335px;
    height: 115px;
    border-radius: 20px;
    opacity: 1;
    background: #fff;
    overflow: hidden;
    margin: 40px auto;
    position: relative;
    .gender-man {
      position: absolute;
      top: 33px;
      left: 258.12px;
      width: 44px;
      height: 50px;
    }
    .gender-text {
      position: absolute;
      left: 157px;
      top: 61px;
      width: 84px;
      height: 22px;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 22px;
      letter-spacing: 0px;
      color: #333333;
    }
    .gender-icon {
      position: absolute;
      top: 6px;
      left: 35px;
      width: 144px;
      height: 144px;
    }
    .gender-hi {
      position: absolute;
      top: 16px;
      left: 157px;
      width: 45px;
      height: 41.14px;
    }
  }
  .gender-man-box-active {
    width: 335px;
    height: 115px;
    border-radius: 20px;
    opacity: 1;
    background: #fff3cc;
    box-sizing: border-box;
    border: 4px solid #ffc500;
    overflow: hidden;
    margin: 40px auto;
    position: relative;
    .gender-man {
      position: absolute;
      top: 33px;
      left: 258.12px;
      width: 44px;
      height: 50px;
    }
    .gender-text {
      position: absolute;
      left: 157px;
      top: 61px;
      width: 84px;
      height: 22px;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 22px;
      letter-spacing: 0px;
      color: #333333;
    }
    .gender-icon {
      position: absolute;
      top: 6px;
      left: 35px;
      width: 144px;
      height: 144px;
    }
    .gender-hi {
      position: absolute;
      top: 16px;
      left: 157px;
      width: 45px;
      height: 41.14px;
    }
  }
  .gender-girl-box {
    width: 335px;
    height: 115px;
    border-radius: 20px;
    opacity: 1;
    background: #fff;
    overflow: hidden;
    margin: 40px auto;
    position: relative;
    .gender-girl {
      position: absolute;
      top: 37px;
      left: 266px;
      width: 28px;
      height: 41px;
    }
    .gender-text {
      position: absolute;
      left: 157px;
      top: 61px;
      width: 84px;
      height: 22px;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 22px;
      letter-spacing: 0px;
      color: #333333;
    }
    .gender-icon {
      position: absolute;
      top: 6px;
      left: 35px;
      width: 144px;
      height: 144px;
    }
    .gender-hi {
      position: absolute;
      top: 16px;
      left: 157px;
      width: 45px;
      height: 41.14px;
    }
  }
  .gender-girl-box-active {
    width: 335px;
    height: 115px;
    border-radius: 20px;
    opacity: 1;
    background: #fff3cc;
    box-sizing: border-box;
    border: 4px solid #ffc500;
    overflow: hidden;
    margin: 40px auto;
    position: relative;
    .gender-girl {
      position: absolute;
      top: 37px;
      left: 266px;
      width: 28px;
      height: 41px;
    }
    .gender-text {
      position: absolute;
      left: 157px;
      top: 61px;
      width: 84px;
      height: 22px;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 22px;
      letter-spacing: 0px;
      color: #333333;
    }
    .gender-icon {
      position: absolute;
      top: 6px;
      left: 35px;
      width: 144px;
      height: 144px;
    }
    .gender-hi {
      position: absolute;
      top: 16px;
      left: 157px;
      width: 45px;
      height: 41.14px;
    }
  }
  .gender-next {
    width: 68px;
    height: 68px;
    background-color: #ffc500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans;
    font-size: 36px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #ffffff;
    margin: 67px auto;
  }
}
.gender-affirm {
  width: 100vw;
  height: 100vh;
  position: relative;
  .affirm-button {
    width: 295px;
    height: 50px;
    background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
    position: absolute;
    top: 569px;
    left: 40px;
    border-radius: 192px;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .affirm-panda {
    position: absolute;
    top: 248px;
    left: 73px;
    width: 217px;
    height: 218px;
    z-index: 1000;
  }
  .platform {
    position: absolute;
    top: 317px;
    left: 59px;
    z-index: 1;
    width: 258px;
    height: 258px;
  }
  .reelect {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 64px;
    height: 28px;
    border-radius: 50px;
    opacity: 1;
    background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
    display: flex;
    align-items: center;
  }
  .reelect-txt {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: 350;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0px;
    color: #ffffff;
    position: absolute;
    left: 47px;
    top: 12px;
  }
  .gender-header-title {
    position: absolute;
    top: 63px;
    width: 100%;
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: 350;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-direction: column;
    .title {
      font-family: Source Han Sans;
      font-size: 28px;
      font-weight: bold;
      line-height: 42px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
    }
  }
}
</style>
